<script setup>
import {useStore} from "vuex";
import {onMounted, ref, toRefs, watch} from "vue";
import ReplyLine from "@/components/read/ReplyLine.vue";
import {ElementUtils} from "@/assets/js/ElementUtils";
import {PostUtils} from "@/assets/js/PostUtils";
import {PostAction} from "@ginstone/nga-api/dist/src/enums/PostAction";

const props = defineProps({
  replyId: {type: Number},
})
const {replyId} = toRefs(props);

const store = useStore();
const data = ref({})
const request = (pid, force) => {
  const loading = ElementUtils.loading({target: "#single-reply",});
  return store.dispatch("Read/readReply", {pid, force}).then(res => {
    data.value = res;
    console.log(res)

    if (!res.replies[0].pid) {
      // 如果回复不可见，尝试准备回复查看其状态
      store.dispatch("Post/prepare", PostUtils.buildPrepareParams(PostAction.REPLY, {tid: res.topicInfo.topicId, pid})).then(res => {
        console.log(res)
      }).catch(ElementUtils.exceptionHandler)
    }

    return res
  }).finally(() => {
    loading.close();
  });
}

onMounted(() => {
  request(replyId.value, false)
})

watch(replyId, (nv) => {
  request(nv, false)
})

</script>

<template>
  <!--回复列表-->
  <div id="single-reply" class="reply-lines-border">
    <!--每一行回复-->
    <reply-line v-for="item in data.replies" :hash="$route.hash" :reply="item" :topic="data.topicInfo" :user-context="data.userContext"/>
  </div>
</template>

<style scoped>
.reply-lines-border {
  min-height: 50px;
}
</style>